<!doctype html>
<html lang="en">

<head>

    <!-- Basic Page Needs
    ================================================== -->
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <link rel="icon" href="assets/images/favicon.png">

    <!-- CSS 
    ================================================== -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/night-mode.css">
    <link rel="stylesheet" href="assets/css/framework.css">

    <!-- icons
    ================================================== -->
    <link rel="stylesheet" href="assets/css/icons.css">

    <!-- Google font
    ================================================== -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">

</head>

<body>

    <!-- Wrapper -->
    <div id="wrapper">

        <!-- sidebar -->
        <div class="main_sidebar">
            <div class="side-overlay" uk-toggle="target: #wrapper ; cls: collapse-sidebar mobile-visible"></div>

            <!-- sidebar header -->
            <div class="sidebar-header">
                <h4> Navigation</h4>
                <span class="btn-close" uk-toggle="target: #wrapper ; cls: collapse-sidebar mobile-visible"></span>
            </div>

            <!-- sidebar Menu -->
            <div class="sidebar">
                <div class="sidebar_innr" data-simplebar>

                    <div class="sections">
                        <h3> Browse </h3>
                        <ul>
                            <li class="active"> <a href="home.html"> <i class="uil-home-alt"></i> Home </a></li>
                            <li> <a href="browse-channals.html"> <i class="uil-users-alt"></i> Subscriptions </a></li>
                            <li> <a href="browse-catagroies.html"> <i class="uil-layers"></i> Catagories </a></li>
                        </ul>
                    </div>


                    <div class="sections">
                        <h3> Subscriptions </h3>
                        <ul>
                            <li> <a href="single-channal.html"> <img src="assets/images/avatars/avatar-3.jpg" alt=""> 
                                Stella Johnson <span class="dot-notiv"></span></a></li>
                            <li>  <a href="single-channal.html">  <img src="assets/images/avatars/avatar-2.jpg" alt=""> 
                                Alex Dolgove <span class="dot-notiv"></span></a></li>
                            <li>  <a href="single-channal.html">  <img src="assets/images/avatars/avatar-4.jpg" alt=""> 
                                Adrian Mohani </a> </li>
                            <li>  <a href="single-channal.html">  <img src="assets/images/avatars/avatar-2.jpg" alt=""> 
                                Stella Johnson </a> </li>
                        </ul>

                        <!-- view more subcription-->
                        <div class="uk-flex uk-flex-center mb-3">
                            <a href="browse-channals.html" class="button default circle px-5"> 
                                <i class="uil-plus mr-2"></i> More Channals</a>
                        </div>

                    </div>

                    <div class="sections">
                        <h3> PAGES </h3>
                        <ul>
                            <li> <a href="#"><i class="uil-code"></i> Development </a>
                                <ul>
                                    <li>
                                        <a href="development-elements.html"> Elements </a>
                                        <a href="development-components.html"> Components</a>
                                        <a href="development-icons.html"> Icons Pack </a>
                                    </li>
                                </ul>

                            </li>
                            <li> <a href="#"><i class="uil-user-circle"></i> Accounts </a>
                                <ul>
                                    <li>
                                        <a href="form-login.html"> Login </a>
                                        <a href="form-register.html"> Register </a>
                                        <a href="form-modern-login.html"> Simple Register</a>
                                        <a href="form-modern-singup.html"> Simple Register</a>
                                    </li>
                                </ul>

                            </li>
                        </ul>
                    </div>

                    <div id="foot">

                        <ul>
                            <li> <a href="#"> About Us </a></li>
                            <li> <a href="#"> Setting </a></li>
                            <li> <a href="#"> Privacy Policy </a></li>
                            <li> <a href="#">  Terms - Conditions </a></li>
                        </ul>


                        <div class="foot-content">
                            <p>© 2019 <strong>GoTube</strong>. All Rights Reserved. </p>
                        </div>

                    </div>



                </div>


            </div>

        </div>

        <!-- header -->
        <div id="main_header">
            <header>

                <!-- Logo-->
                <i class="header-traiger uil-bars"
                    uk-toggle="target: #wrapper ; cls: collapse-sidebar mobile-visible"></i>

                <!-- Logo-->
                <div id="logo">
                    <a href="#"> <img src="assets/images/logo.png" alt=""></a>
                    <a href="#"> <img src="assets/images/logo-light.png" class="logo-inverse" alt=""></a>
                </div>

                <!-- form search-->
                <div class="head_search">
                    <form>
                        <div class="head_search_cont">
                            <input value="" type="text" class="form-control"
                                placeholder="Search for Videos, Games, Movies and more.." autocomplete="off">
                            <i class="s_icon uil-search-alt"></i>
                        </div>

                        <!-- Search box dropdown -->
                        <div uk-dropdown="pos: top;mode:click;animation: uk-animation-slide-bottom-small"
                            class="dropdown-search">
                            <!-- User menu -->

                            <ul class="dropdown-search-list">
                                <li class="list-title"> Recent Searches </li>
                                <li> <a href="single-video.html"> Adobe XD Design Free Tutorial .. </a> </li>
                                <li> <a href="single-video.html"> How to create a basic Sticky HTML element .. </a>
                                </li>
                                <li> <a href="single-video.html"> Learn How to Prototype Faster with Mockplus! in 2020
                                    </a> </li>
                                <li> <a href="single-video.html"> Adobe XD Design Tutorial Company Website Landing Page
                                        .. </a> </li>
                                <li class="menu-divider">
                                <li class="list-footer"> <a href="your-history.html"> Searches History </a></li>
                            </ul>

                        </div>


                    </form>
                </div>

                <!-- user icons -->
                <div class="head_user">

                    <a href="#" class="btn-upgrade uk-visible@s"> <i class="uil-bolt-alt"></i> Pro</a>
                    <a href="#" class="btn-upload uk-visible@s"> <i class="uil-cloud-upload"></i> Upload</a>

                    <!-- upload dropdown box -->
                    <div uk-dropdown="pos: top-right;mode:click ; animation: uk-animation-slide-bottom-small"
                        class="dropdown-notifications">

                        <!-- notivication header -->
                        <div class="dropdown-notifications-headline">
                            <h4>Upload Video</h4>
                        </div>

                        <!-- notification contents -->
                        <div class="dropdown-notifications-content uk-flex uk-flex-middle uk-flex-center text-center">


                            <div class="uk-flex uk-flex-column choose-upload  text-center">
                                <img src="assets/images/upload.png" width="70" class="m-auto" alt="">
                                <p class="my-3"> Do you have a video wants to share us <br> please upload her ..
                                </p>
                                <div uk-form-custom>
                                    <input type="file">
                                    <a href="#" class="button soft-warning small"> Choose file</a>
                                </div>

                                <a href="#" class="uk-text-muted mt-3 uk-link"
                                    uk-toggle="target: .choose-upload ;  animation: uk-animation-slide-right-small, uk-animation-slide-left-medium; queued: true">
                                    Or Import Video </a>
                            </div>

                            <div class="uk-flex uk-flex-column choose-upload" hidden>
                                <i class="uil-import icon-large text-muted"></i>
                                <p class="my-3"> Import videos from YouTube <br> Copy / Paste your video link here </p>
                                <form class="uk-grid-small" uk-grid>
                                    <div class="uk-width-expand">
                                        <input type="text" class="uk-input uk-form-small" placeholder="Paste link">
                                    </div>
                                    <div class="uk-width-auto"> <button type="submit" class="button soft-warning">
                                            Import </button> </div>
                                </form>
                                <a href="#" class="uk-text-muted mt-3 uk-link"
                                    uk-toggle="target: .choose-upload ; animation: uk-animation-slide-left-small, uk-animation-slide-right-medium; queued: true">
                                    Or Upload Video </a>
                            </div>



                        </div>
                        <hr class="m-0">
                        <div class="text-center uk-text-small py-2 uk-text-muted"> Your Video size Must be Maxmium 999MB
                        </div>
                    </div>


                    <!-- videos feed  -->
                    <a href="#video" class="opts_icon" uk-toggle> <i class="uil-youtube-alt"></i> <span>9+</span>  </a>

                    <!-- videos feed  offcanvas-->
                    <div id="video" uk-offcanvas="overlay: true ;flip: true">
                        <div class="uk-offcanvas-bar uk-width-large">

                            <h3> Your Subscription </h3>
                            <hr class="mb-3" style="margin:0 -20px">
                            <button class="uk-offcanvas-close" type="button" uk-close></button>

                            <div class="video-list-small uk-child-width-1-1" uk-grid>

                                <div>
                                    <a href="single-video.html" class="video-post video-post-list">
                                        <!-- Blog Post Thumbnail -->
                                        <div class="video-post-thumbnail">
                                            <span class="video-post-count">1.4M</span>
                                            <span class="video-post-time">23:00</span>
                                            <span class="play-btn-trigger"></span>

                                            <img src="assets/images/video-thumbal/2.png" alt="">

                                        </div>

                                        <!-- Blog Post Content -->
                                        <div class="video-post-content">
                                            <h3> How to create a basic Sticky HTML element..</h3>
                                            <img src="assets/images/avatars/avatar-3.jpg" alt="">
                                            <span class="video-post-user">Jonathan Madano</span>
                                            <span class="video-post-views">531k views</span>
                                            <span class="video-post-date"> 2 weeks ago </span>
                                        </div>
                                    </a>
                                </div>

                                <div>
                                    <a href="single-video.html" class="video-post video-post-list">
                                        <!-- Blog Post Thumbnail -->
                                        <div class="video-post-thumbnail">
                                            <span class="video-post-count">2.7k</span>
                                            <span class="video-post-time">40:00</span>
                                            <span class="play-btn-trigger"></span>
                                            <img src="assets/images/video-thumbal/1.png" alt="">
                                        </div>
                                        <!-- Blog Post Content -->
                                        <div class="video-post-content">
                                            <h3> Learn how to create PHP singleton class </h3>
                                            <img src="assets/images/avatars/avatar-2.jpg" alt="">
                                            <span class="video-post-user">Stella Johnson</span>
                                            <span class="video-post-views">938k views</span>
                                            <span class="video-post-date"> 3 weeks ago </span>
                                        </div>
                                    </a>
                                </div>

                                <div>
                                    <a href="single-video.html" class="video-post video-post-list">
                                        <!-- Blog Post Thumbnail -->
                                        <div class="video-post-thumbnail">
                                            <span class="video-post-count">2.3M</span>
                                            <span class="video-post-time">14:00</span>
                                            <span class="play-btn-trigger"></span>
                                            <img src="assets/images/video-thumbal/3.png" alt="">
                                        </div>
                                        <!-- Blog Post Content -->
                                        <div class="video-post-content">
                                            <h3> Learn Creating Laravel Package Initializing ... </h3>
                                            <img src="assets/images/avatars/avatar-5.jpg" alt="">
                                            <span class="video-post-user">Alex Dolgove</span>
                                            <span class="video-post-views">531k views</span>
                                            <span class="video-post-date"> 2 weeks ago </span>
                                        </div>
                                    </a>
                                </div>

                                <div>
                                    <a href="single-video.html" class="video-post video-post-list">
                                        <!-- Blog Post Thumbnail -->
                                        <div class="video-post-thumbnail">
                                            <span class="video-post-count">1.4M</span>
                                            <span class="video-post-time">23:00</span>
                                            <span class="play-btn-trigger"></span>
                                            <img src="assets/images/video-thumbal/4.png" alt="">
                                        </div>
                                        <!-- Blog Post Content -->
                                        <div class="video-post-content">
                                            <h3> Learn how to upload files using Laravel .. </h3>
                                            <img src="assets/images/avatars/avatar-4.jpg" alt="">
                                            <span class="video-post-user">Adrian Mohani</span>
                                            <span class="video-post-views">531k views</span>
                                            <span class="video-post-date"> 2 weeks ago </span>
                                        </div>
                                    </a>
                                </div>

                                <div>
                                    <a href="single-video.html" class="video-post video-post-list">
                                        <!-- Blog Post Thumbnail -->
                                        <div class="video-post-thumbnail">
                                            <span class="video-post-count">1.4M</span>
                                            <span class="video-post-time">23:00</span>
                                            <span class="play-btn-trigger"></span>
                                            <img src="assets/images/video-thumbal/2.png" alt="">
                                        </div>

                                        <!-- Blog Post Content -->
                                        <div class="video-post-content">
                                            <h3> How to create a basic Sticky HTML element ..</h3>
                                            <img src="assets/images/avatars/avatar-3.jpg" alt="">
                                            <span class="video-post-user">Jonathan Madano</span>
                                            <span class="video-post-views">531k views</span>
                                            <span class="video-post-date"> 2 weeks ago </span>
                                        </div>
                                    </a>
                                </div>

                                <div>
                                    <a href="single-video.html" class="video-post video-post-list">
                                        <!-- Blog Post Thumbnail -->
                                        <div class="video-post-thumbnail">
                                            <span class="video-post-count">2.7k</span>
                                            <span class="video-post-time">40:00</span>
                                            <span class="play-btn-trigger"></span>
                                            <img src="assets/images/video-thumbal/1.png" alt="">
                                        </div>
                                        <!-- Blog Post Content -->
                                        <div class="video-post-content">
                                            <h3> Learn how to create PHP singleton class </h3>
                                            <img src="assets/images/avatars/avatar-2.jpg" alt="">
                                            <span class="video-post-user">Stella Johnson</span>
                                            <span class="video-post-views">938k views</span>
                                            <span class="video-post-date"> 3 weeks ago </span>
                                        </div>
                                    </a>
                                </div>

                            </div>

                        </div>
                    </div>


                    <!-- browse apps  -->
                    <a href="#" class="opts_icon uk-visible@s"> <i class="uil-apps"></i> </a>

                    <!-- browse apps dropdown -->
                    <div uk-dropdown="pos: top;mode:click ; animation: uk-animation-scale-up" class="icon-browse">

                        <a href="#" class="icon-menu-item"> <i class="uil-shop"></i> Dashboard </a>
                        <a href="#" class="icon-menu-item"> <i class="uil-envelope-alt"></i> Messages </a>
                        <a href="#" class="icon-menu-item"> <i class="uil-bookmark"></i> Bookmark </a>
                        <a href="#" class="icon-menu-item"> <i class="uil-shopping-basket"></i> Cart </a>
                        <a href="#" class="icon-menu-item"> <i class="uil-shield-check"></i> Privacy </a>
                        <a href="#" class="icon-menu-item"> <i class="uil-bolt-alt"></i> Upgrade </a>
                        <a href="#" class="more-app"> More Features</a>
                    </div>


                    <!-- Message  notificiation dropdown -->
                    <a href="#" class="opts_icon"> <i class="uil-envelope-alt"></i> <span>4</span> </a>

                    <!-- Message  notificiation dropdown -->
                    <div uk-dropdown="pos: top-right;mode:click ; animation: uk-animation-slide-bottom-small"
                        class="dropdown-notifications">

                        <!-- notivication header -->
                        <div class="dropdown-notifications-headline">
                            <h4>Messages</h4>
                            <a href="#">
                                <i class="icon-feather-settings" uk-tooltip="title: Message settings ; pos: left"></i>
                            </a>
                        </div>

                        <!-- notification contents -->
                        <div class="dropdown-notifications-content" data-simplebar>

                            <!-- notiviation list -->
                            <ul>
                                <li class="notifications-not-read">
                                    <a href="#">
                                        <span class="notification-avatar">
                                            <img src="assets/images/avatars/avatar-2.jpg" alt="">
                                        </span>
                                        <div class="notification-text notification-msg-text">
                                            <strong>Jonathan Madano</strong>
                                            <p>Okay.. Thanks for The Answer I will be waiting for your...</p>
                                            <span class="time-ago"> 2 hours ago </span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="notification-avatar">
                                            <img src="assets/images/avatars/avatar-3.jpg" alt="">
                                        </span>
                                        <div class="notification-text notification-msg-text">
                                            <strong>Stella Johnson</strong>
                                            <p> Alex will explain you how to keep your videos privatly and all that...
                                            </p>
                                            <span class="time-ago"> 7 hours ago </span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="notification-avatar">
                                            <img src="assets/images/avatars/avatar-1.jpg" alt="">
                                        </span>
                                        <div class="notification-text notification-msg-text">
                                            <strong>Alex Dolgove</strong>
                                            <p> Alia just joined Messenger! Be the first to send a
                                                welcome message..</p>
                                            <span class="time-ago"> 19 hours ago </span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="notification-avatar">
                                            <img src="assets/images/avatars/avatar-4.jpg" alt="">
                                        </span>
                                        <div class="notification-text notification-msg-text">
                                            <strong>Adrian Mohani</strong>
                                            <p> Okay.. Thanks for The Answer I will be waiting for your... </p>
                                            <span class="time-ago"> Yesterday </span>
                                        </div>
                                    </a>
                                </li>
                            </ul>

                        </div>
                        <div class="dropdown-notifications-footer">
                            <a href="#"> sell all <i class="icon-line-awesome-long-arrow-right"></i> </a>
                        </div>


                    </div>


                    <!-- notificiation icon  -->
                    <a href="#" class="opts_icon"> <i class="uil-bell"></i> <span>3</span> </a>

                    <!-- notificiation dropdown -->
                    <div uk-dropdown="pos: top-right;mode:click ; animation: uk-animation-slide-bottom-small"
                        class="dropdown-notifications">

                        <!-- notivication header -->
                        <div class="dropdown-notifications-headline">
                            <h4>Notifications </h4>
                            <a href="#">
                                <i class="icon-feather-settings"
                                    uk-tooltip="title: Notifications settings ; pos: left"></i>
                            </a>
                        </div>

                        <!-- notification contents -->
                        <div class="dropdown-notifications-content" data-simplebar>

                            <!-- notiviation list -->
                            <ul>
                                <li class="notifications-not-read">
                                    <a href="#">
                                        <span class="notification-icon">
                                            <i class="icon-feather-thumbs-up"></i></span>
                                        <span class="notification-text">
                                            <strong>Adrian Mohani</strong> Like Your Comment On Video
                                            <span class="text-primary">Learn Prototype Faster</span>
                                            <br> <span class="time-ago"> 9 hours ago </span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="notification-icon">
                                            <i class="icon-feather-star"></i></span>
                                        <span class="notification-text">
                                            <strong>Alex Dolgove</strong> Added New Review In Video
                                            <span class="text-primary">Full Stack PHP Developer</span>
                                            <br> <span class="time-ago"> 19 hours ago </span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="notification-icon">
                                            <i class="icon-feather-message-circle"></i></span>
                                        <span class="notification-text">
                                            <strong>Stella Johnson</strong> Replay Your Comments in
                                            <span class="text-primary">Adobe XD Tutorial</span>
                                            <br> <span class="time-ago"> 12 hours ago </span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="notification-icon">
                                            <i class="icon-feather-share-2"></i></span>
                                        <span class="notification-text">
                                            <strong>Adrian Mohani</strong> Like Your Comment On Video
                                            <span class="text-primary">Learn Prototype Faster</span>
                                            <br> <span class="time-ago"> Yesterday </span>
                                        </span>
                                    </a>
                                </li>
                            </ul>

                        </div>


                    </div>


                    <!-- profile -image -->
                    <a class="opts_account"> <img src="assets/images/avatars/avatar-1.jpg" alt=""></a>

                    <!-- profile dropdown-->
                    <div uk-dropdown="pos: top-right;mode:click ; animation: uk-animation-slide-bottom-small"
                        class="dropdown-notifications small">

                        <!-- User Name / Avatar -->
                        <a href="#">

                            <div class="dropdown-user-details">
                                <div class="dropdown-user-avatar">
                                    <img src="assets/images/avatars/avatar-1.jpg" alt="">
                                </div>
                                <div class="dropdown-user-name">
                                    Richard Ali <span> verified <i class="uil-check"></i> </span>
                                </div>
                            </div>

                        </a>

                        <!-- User menu -->

                        <ul class="dropdown-user-menu">
                            <li><a href="#"> <i class="uil-bolt"></i> Go PRO</a> </li>
                            <li><a href="#"> <i class="uil-user"></i> My Channal </a> </li>
                            <li><a href="#"> <i class="uil-thumbs-up"></i> Liked Videos </a></li>
                            <li><a href="#"> <i class="uil-history"></i> Watch Later </a></li>
                            <li><a href="#"> <i class="uil-cog"></i> Account Settings</a></li>
                            <li><a href="#" style="color:#ff8400"> <i class="uil-bolt"></i> Upgrade To Premium</a> </li>
                            <li>
                                <a href="#" id="night-mode" class="btn-night-mode">
                                    <i class="icon-feather-moon"></i> Night mode
                                    <span class="btn-night-mode-switch">
                                        <span class="uk-switch-button"></span>
                                    </span>
                                </a>
                            </li>
                            <li class="menu-divider">
                            <li><a href="#"> <i class="icon-feather-help-circle"></i> Help</a>
                            </li>
                            <li><a href="#"> <i class="icon-feather-log-out"></i> Sing Out</a>
                            </li>
                        </ul>


                    </div>

                </div>

            </header>

        </div>

        <!-- contents -->
        <div class="main_content">

            <div class="channal">
                <div class="channal-cover">

                    <!-- channal cover -->
                    <img src="assets/images/channnal-cover.jpg" alt="">

                </div>

                <div class="main_content_inner">
                    <div class="channal-details">
                        <div class="left-side">
                            <div class="channal-image">
                                <a href="#">
                                    <img src="assets/images/avatars/avatar-1.jpg" alt="">
                                </a>
                            </div>
                            <div class="channal-details-info">
                                <h3> Jesse Showalter </h3>
                                <p> 12k Subscirptions</p>
                            </div>
                        </div>
                        <div class="right-side">
                            <div class="btn-subscribe">
                                <a href="#" class="button soft-warning"> <i class="icon-feather-plus"></i> subscribe
                                </a>
                                <span class="subs-amount">120K</span>
                            </div>
                        </div>
                    </div>

                    <div class="nav-channal" k-sticky="offset:61;media : @s">
                        <nav class="responsive-tab">
                            <ul>
                                <li class="uk-active"><a class="active" href="#0">Home</a></li>
                                <li><a href="#0">Videos</a></li>
                                <li><a href="#0">Playlist</a></li>
                                <li><a href="#0">Channels</a></li>
                                <li><a href="#0">About</a></li>
                            </ul>
                        </nav>
                        <form class="nav-channal-saerchbox">
                            <i class="uil-search"></i>
                            <input class="uk-input" type="text" value="Search Video...">
                        </form>
                    </div>
                </div>


            </div>

            <div class="main_content_inner">


                <!-- feature video-->
                <div class="uk-grid-large" uk-grid>
                    <div class="uk-width-3-4@m">

                        <h3> Feature Videos </h3>

                        <div class="uk-card uk-grid-collapse uk-child-width-1-2@s uk-margin" uk-grid>
                            <div class="uk-card-media-left uk-cover-container">


                                <div class="embed-video">
                                    <iframe src="https://www.youtube.com/embed/pQN-pnXPaVg" frameborder="0"
                                        uk-video="automute: true" allowfullscreen uk-responsive></iframe>
                                </div>

                                <!--  Single image
                                <img src="assets/images/photo2.jpg" alt="" uk-cover>
                                <canvas width="600" height="350"></canvas> -->

                            </div>
                            <div>
                                <div class="pl-lg-5 mt-sm-3">
                                    <h3 class="uk-card-title"> Build a Website Tutorial </h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                                        incididunt. favorite sketches, behind the scenes clips and web exclusives,
                                        featuring all your favorite
                                        hosts and cast members. Check out more SNL at </p>

                                        <div class="user-details-card py-0">
                                            <div class="user-details-card-avatar">
                                                <img src="assets/images/avatars/avatar-3.jpg" style="width: 40px;" alt="">
                                            </div>
                                            <div class="user-details-card-name">
                                                Stella Johnson <span> Developer <span> 1 year ago </span> </span>
                                            </div>
                                        </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="uk-width-expand">

                        <h5> Stats </h5>
                        <ul class="uk-list">
                            <li> Joined Jul 2019 </li>
                            <li> 3,741,400,119 views </li>
                            <li> 25,345,348 subscribers </li>
                            <li> 729 videos</li>
                        </ul>

                    </div>
                </div>

                <div class="section-small">
                    <h3> Latest Video uplaods </h3>

                    <div class="video-grid-slider" uk-slider="finite: true">
                        <ul class="uk-slider-items uk-child-width-1-4@m uk-child-width-1-3@s uk-grid">

                            <li>
                                <a href="single-video.html" class="video-post">
                                    <!-- Blog Post Thumbnail -->
                                    <div class="video-post-thumbnail">
                                        <span class="video-post-count">2.7K</span>
                                        <span class="video-post-time">23:00</span>
                                        <span class="play-btn-trigger"></span>
                                        <!-- option menu -->
                                        <span class="btn-option">
                                            <i class="icon-feather-more-vertical"></i>
                                        </span>
                                        <div class="dropdown-option-nav"
                                            uk-dropdown="pos: bottom-right ;mode : hover ;animation: uk-animation-slide-bottom-small">
                                            <ul>
                                                <li>
                                                    <span> <i class="uil-history"></i> Watch Later</span>
                                                </li>
                                                <li>
                                                    <span> <i class="uil-bookmark"></i> Add Bookmark</span>
                                                </li>
                                                <li>
                                                    <span> <i class="uil-share-alt"></i> Share Your Friends</span>
                                                </li>
                                            </ul>
                                        </div>
                                        <img src="assets/images/video-thumbal/img-5.png" alt="">
                                    </div>
                                    <!-- Blog Post Content -->
                                    <div class="video-post-content">
                                        <h3> Learn UI/UX Designing Latest Website In Adobe XD </h3>
                                        <img src="assets/images/avatars/avatar-4.jpg" alt="">
                                        <span class="video-post-user">Adrian Mohani</span>
                                        <span class="video-post-views">531k views</span>
                                        <span class="video-post-date"> 2 weeks ago </span>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a href="single-video.html" class="video-post">
                                    <!-- Blog Post Thumbnail -->
                                    <div class="video-post-thumbnail">
                                        <span class="video-post-count">1.4M</span>
                                        <span class="video-post-time">23:00</span>
                                        <span class="play-btn-trigger"></span>
                                        <!-- option menu -->
                                        <span class="btn-option">
                                            <i class="icon-feather-more-vertical"></i>
                                        </span>
                                        <div class="dropdown-option-nav"
                                            uk-dropdown="pos: bottom-right ;mode : hover ;animation: uk-animation-slide-bottom-small">
                                            <ul>
                                                <li>
                                                    <span> <i class="uil-history"></i> Watch Later</span>
                                                </li>
                                                <li>
                                                    <span> <i class="uil-bookmark"></i> Add Bookmark</span>
                                                </li>
                                                <li>
                                                    <span> <i class="uil-share-alt"></i> Share Your Friends</span>
                                                </li>
                                            </ul>
                                        </div>

                                        <img src="assets/images/video-thumbal/img-1.png" alt="">

                                    </div>

                                    <!-- Blog Post Content -->
                                    <div class="video-post-content">
                                        <h3> Learn How-To Design & Prototype in Adobe XD Tutorial </h3>
                                        <img src="assets/images/avatars/avatar-3.jpg" alt="">
                                        <span class="video-post-user">Jonathan Madano</span>
                                        <span class="video-post-views">531k views</span>
                                        <span class="video-post-date"> 2 weeks ago </span>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a href="single-video.html" class="video-post">
                                    <!-- Blog Post Thumbnail -->
                                    <div class="video-post-thumbnail">
                                        <span class="video-post-count">1.4M</span>
                                        <span class="video-post-time">23:00</span>
                                        <span class="play-btn-trigger"></span>
                                        <!-- option menu -->
                                        <span class="btn-option">
                                            <i class="icon-feather-more-vertical"></i>
                                        </span>
                                        <div class="dropdown-option-nav"
                                            uk-dropdown="pos: bottom-right ;mode : hover ;animation: uk-animation-slide-bottom-small">
                                            <ul>
                                                <li>
                                                    <span> <i class="uil-history"></i> Watch Later</span>
                                                </li>
                                                <li>
                                                    <span> <i class="uil-bookmark"></i> Add Bookmark</span>
                                                </li>
                                                <li>
                                                    <span> <i class="uil-share-alt"></i> Share Your Friends</span>
                                                </li>
                                            </ul>
                                        </div>
                                        <img src="assets/images/video-thumbal/4.png" alt="">
                                    </div>
                                    <!-- Blog Post Content -->
                                    <div class="video-post-content">
                                        <h3> Learn how to upload files using Laravel and Filepond </h3>
                                        <img src="assets/images/avatars/avatar-4.jpg" alt="">
                                        <span class="video-post-user">Adrian Mohani</span>
                                        <span class="video-post-views">531k views</span>
                                        <span class="video-post-date"> 2 weeks ago </span>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a href="single-video.html" class="video-post">
                                    <!-- Blog Post Thumbnail -->
                                    <div class="video-post-thumbnail">
                                        <span class="video-post-count">1.4M</span>
                                        <span class="video-post-time">23:00</span>
                                        <span class="play-btn-trigger"></span>
                                        <!-- option menu -->
                                        <span class="btn-option">
                                            <i class="icon-feather-more-vertical"></i>
                                        </span>
                                        <div class="dropdown-option-nav"
                                            uk-dropdown="pos: bottom-right ;mode : hover ;animation: uk-animation-slide-bottom-small">
                                            <ul>
                                                <li>
                                                    <span> <i class="uil-history"></i> Watch Later</span>
                                                </li>
                                                <li>
                                                    <span> <i class="uil-bookmark"></i> Add Bookmark</span>
                                                </li>
                                                <li>
                                                    <span> <i class="uil-share-alt"></i> Share Your Friends</span>
                                                </li>
                                            </ul>
                                        </div>

                                        <img src="assets/images/video-thumbal/2.png" alt="">

                                    </div>

                                    <!-- Blog Post Content -->
                                    <div class="video-post-content">
                                        <h3> How to create a basic Sticky HTML element using CSS </h3>
                                        <img src="assets/images/avatars/avatar-3.jpg" alt="">
                                        <span class="video-post-user">Jonathan Madano</span>
                                        <span class="video-post-views">531k views</span>
                                        <span class="video-post-date"> 2 weeks ago </span>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a href="single-video.html" class="video-post">
                                    <!-- Blog Post Thumbnail -->
                                    <div class="video-post-thumbnail">
                                        <span class="video-post-count">2.7k</span>
                                        <span class="video-post-time">40:00</span>
                                        <span class="play-btn-trigger"></span>
                                        <!-- option menu -->
                                        <span class="btn-option">
                                            <i class="icon-feather-more-vertical"></i>
                                        </span>
                                        <div class="dropdown-option-nav"
                                            uk-dropdown="pos: bottom-right ;mode : hover;animation: uk-animation-slide-bottom-small">
                                            <ul>
                                                <li>
                                                    <span> <i class="uil-history"></i> Watch Later</span>
                                                </li>
                                                <li>
                                                    <span> <i class="uil-bookmark"></i> Add Bookmark</span>
                                                </li>
                                                <li>
                                                    <span> <i class="uil-share-alt"></i> Share Your Friends</span>
                                                </li>
                                            </ul>
                                        </div>
                                        <img src="assets/images/video-thumbal/img-2.png" alt="">
                                    </div>
                                    <!-- Blog Post Content -->
                                    <div class="video-post-content">
                                        <h3> Adobe XD Basics Top 30 Tips to know when getting started </h3>
                                        <img src="assets/images/avatars/avatar-2.jpg" alt="">
                                        <span class="video-post-user">Stella Johnson</span>
                                        <span class="video-post-views">938k views</span>
                                        <span class="video-post-date"> 3 weeks ago </span>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a href="single-video.html" class="video-post">
                                    <!-- Blog Post Thumbnail -->
                                    <div class="video-post-thumbnail">
                                        <span class="video-post-count">2.7k</span>
                                        <span class="video-post-time">40:00</span>
                                        <span class="play-btn-trigger"></span>
                                        <!-- option menu -->
                                        <span class="btn-option">
                                            <i class="icon-feather-more-vertical"></i>
                                        </span>
                                        <div class="dropdown-option-nav"
                                            uk-dropdown="pos: bottom-right ;mode : hover;animation: uk-animation-slide-bottom-small">
                                            <ul>
                                                <li>
                                                    <span> <i class="uil-history"></i> Watch Later</span>
                                                </li>
                                                <li>
                                                    <span> <i class="uil-bookmark"></i> Add Bookmark</span>
                                                </li>
                                                <li>
                                                    <span> <i class="uil-share-alt"></i> Share Your Friends</span>
                                                </li>
                                            </ul>
                                        </div>
                                        <img src="assets/images/video-thumbal/1.png" alt="">
                                    </div>
                                    <!-- Blog Post Content -->
                                    <div class="video-post-content">
                                        <h3> Learn how to create a PHP singleton class </h3>
                                        <img src="assets/images/avatars/avatar-2.jpg" alt="">
                                        <span class="video-post-user">Stella Johnson</span>
                                        <span class="video-post-views">938k views</span>
                                        <span class="video-post-date"> 3 weeks ago </span>
                                    </div>
                                </a>
                            </li>

                        </ul>

                        <a class="uk-position-center-left uk-position-small uk-hidden-hover slidenav-prev" href="#"
                            uk-slider-item="previous"></a>
                        <a class="uk-position-center-right uk-position-small uk-hidden-hover slidenav-next" href="#"
                            uk-slider-item="next"></a>


                    </div>

                </div>

                <div class="section-small">

                    <h3> All Videos </h3>

                    <div class="uk-child-width-1-4@m mb-11" uk-grid
                        uk-scrollspy="target: > div; cls: uk-animation-slide-bottom-small; delay: 100">

                        <div>
                            <a href="single-video.html" class="video-post">
                                <!-- Blog Post Thumbnail -->
                                <div class="video-post-thumbnail">
                                    <span class="video-post-count">1.4M</span>
                                    <span class="video-post-time">23:00</span>
                                    <span class="play-btn-trigger"></span>
                                    <!-- option menu -->
                                    <span class="btn-option">
                                        <i class="icon-feather-more-vertical"></i>
                                    </span>
                                    <div class="dropdown-option-nav"
                                        uk-dropdown="pos: bottom-right ;mode : hover ;animation: uk-animation-slide-bottom-small">
                                        <ul>
                                            <li>
                                                <span> <i class="uil-history"></i> Watch Later</span>
                                            </li>
                                            <li>
                                                <span> <i class="uil-bookmark"></i> Add Bookmark</span>
                                            </li>
                                            <li>
                                                <span> <i class="uil-share-alt"></i> Share Your Friends</span>
                                            </li>
                                        </ul>
                                    </div>

                                    <img src="assets/images/video-thumbal/2.png" alt="">

                                </div>

                                <!-- Blog Post Content -->
                                <div class="video-post-content">
                                    <h3> How to create a basic Sticky HTML element using CSS </h3>
                                    <img src="assets/images/avatars/avatar-3.jpg" alt="">
                                    <span class="video-post-user">Jonathan Madano</span>
                                    <span class="video-post-views">531k views</span>
                                    <span class="video-post-date"> 2 weeks ago </span>
                                </div>
                            </a>
                        </div>

                        <div>
                            <a href="single-video.html" class="video-post">
                                <!-- Blog Post Thumbnail -->
                                <div class="video-post-thumbnail">
                                    <span class="video-post-count">2.7k</span>
                                    <span class="video-post-time">40:00</span>
                                    <span class="play-btn-trigger"></span>
                                    <!-- option menu -->
                                    <span class="btn-option">
                                        <i class="icon-feather-more-vertical"></i>
                                    </span>
                                    <div class="dropdown-option-nav"
                                        uk-dropdown="pos: bottom-right ;mode : hover;animation: uk-animation-slide-bottom-small">
                                        <ul>
                                            <li>
                                                <span> <i class="uil-history"></i> Watch Later</span>
                                            </li>
                                            <li>
                                                <span> <i class="uil-bookmark"></i> Add Bookmark</span>
                                            </li>
                                            <li>
                                                <span> <i class="uil-share-alt"></i> Share Your Friends</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <img src="assets/images/video-thumbal/1.png" alt="">
                                </div>
                                <!-- Blog Post Content -->
                                <div class="video-post-content">
                                    <h3> Learn how to create a PHP singleton class </h3>
                                    <img src="assets/images/avatars/avatar-2.jpg" alt="">
                                    <span class="video-post-user">Stella Johnson</span>
                                    <span class="video-post-views">938k views</span>
                                    <span class="video-post-date"> 3 weeks ago </span>
                                </div>
                            </a>
                        </div>

                        <div>
                            <a href="single-video.html" class="video-post">
                                <!-- Blog Post Thumbnail -->
                                <div class="video-post-thumbnail">
                                    <span class="video-post-count">2.3M</span>
                                    <span class="video-post-time">14:00</span>
                                    <span class="play-btn-trigger"></span>
                                    <!-- option menu -->
                                    <span class="btn-option">
                                        <i class="icon-feather-more-vertical"></i>
                                    </span>
                                    <div class="dropdown-option-nav"
                                        uk-dropdown="pos: bottom-right ;mode : hover;animation: uk-animation-slide-bottom-small">
                                        <ul>
                                            <li>
                                                <span> <i class="uil-history"></i> Watch Later</span>
                                            </li>
                                            <li>
                                                <span> <i class="uil-bookmark"></i> Add Bookmark</span>
                                            </li>
                                            <li>
                                                <span> <i class="uil-share-alt"></i> Share Your Friends</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <img src="assets/images/video-thumbal/3.png" alt="">
                                </div>
                                <!-- Blog Post Content -->
                                <div class="video-post-content">
                                    <h3> Creating a Laravel Package - and Initializing Package Folders </h3>
                                    <img src="assets/images/avatars/avatar-5.jpg" alt="">
                                    <span class="video-post-user">Alex Dolgove</span>
                                    <span class="video-post-views">531k views</span>
                                    <span class="video-post-date"> 2 weeks ago </span>
                                </div>
                            </a>
                        </div>

                        <div>
                            <a href="single-video.html" class="video-post">
                                <!-- Blog Post Thumbnail -->
                                <div class="video-post-thumbnail">
                                    <span class="video-post-count">1.4M</span>
                                    <span class="video-post-time">23:00</span>
                                    <span class="play-btn-trigger"></span>
                                    <!-- option menu -->
                                    <span class="btn-option">
                                        <i class="icon-feather-more-vertical"></i>
                                    </span>
                                    <div class="dropdown-option-nav"
                                        uk-dropdown="pos: bottom-right ;mode : hover ;animation: uk-animation-slide-bottom-small">
                                        <ul>
                                            <li>
                                                <span> <i class="uil-history"></i> Watch Later</span>
                                            </li>
                                            <li>
                                                <span> <i class="uil-bookmark"></i> Add Bookmark</span>
                                            </li>
                                            <li>
                                                <span> <i class="uil-share-alt"></i> Share Your Friends</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <img src="assets/images/video-thumbal/4.png" alt="">
                                </div>
                                <!-- Blog Post Content -->
                                <div class="video-post-content">
                                    <h3> Learn how to upload files using Laravel and Filepond </h3>
                                    <img src="assets/images/avatars/avatar-4.jpg" alt="">
                                    <span class="video-post-user">Adrian Mohani</span>
                                    <span class="video-post-views">531k views</span>
                                    <span class="video-post-date"> 2 weeks ago </span>
                                </div>
                            </a>
                        </div>





                        <div>
                            <a href="single-video.html" class="video-post">
                                <!-- Blog Post Thumbnail -->
                                <div class="video-post-thumbnail">
                                    <span class="video-post-count">1.4M</span>
                                    <span class="video-post-time">23:00</span>
                                    <span class="play-btn-trigger"></span>
                                    <!-- option menu -->
                                    <span class="btn-option">
                                        <i class="icon-feather-more-vertical"></i>
                                    </span>
                                    <div class="dropdown-option-nav"
                                        uk-dropdown="pos: bottom-right ;mode : hover ;animation: uk-animation-slide-bottom-small">
                                        <ul>
                                            <li>
                                                <span> <i class="uil-history"></i> Watch Later</span>
                                            </li>
                                            <li>
                                                <span> <i class="uil-bookmark"></i> Add Bookmark</span>
                                            </li>
                                            <li>
                                                <span> <i class="uil-share-alt"></i> Share Your Friends</span>
                                            </li>
                                        </ul>
                                    </div>

                                    <img src="assets/images/video-thumbal/img-1.png" alt="">

                                </div>

                                <!-- Blog Post Content -->
                                <div class="video-post-content">
                                    <h3> Learn How-To Design & Prototype in Adobe XD Tutorial </h3>
                                    <img src="assets/images/avatars/avatar-3.jpg" alt="">
                                    <span class="video-post-user">Jonathan Madano</span>
                                    <span class="video-post-views">531k views</span>
                                    <span class="video-post-date"> 2 weeks ago </span>
                                </div>
                            </a>
                        </div>

                        <div>
                            <a href="single-video.html" class="video-post">
                                <!-- Blog Post Thumbnail -->
                                <div class="video-post-thumbnail">
                                    <span class="video-post-count">2.7k</span>
                                    <span class="video-post-time">40:00</span>
                                    <span class="play-btn-trigger"></span>
                                    <!-- option menu -->
                                    <span class="btn-option">
                                        <i class="icon-feather-more-vertical"></i>
                                    </span>
                                    <div class="dropdown-option-nav"
                                        uk-dropdown="pos: bottom-right ;mode : hover;animation: uk-animation-slide-bottom-small">
                                        <ul>
                                            <li>
                                                <span> <i class="uil-history"></i> Watch Later</span>
                                            </li>
                                            <li>
                                                <span> <i class="uil-bookmark"></i> Add Bookmark</span>
                                            </li>
                                            <li>
                                                <span> <i class="uil-share-alt"></i> Share Your Friends</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <img src="assets/images/video-thumbal/img-3.png" alt="">
                                </div>
                                <!-- Blog Post Content -->
                                <div class="video-post-content">
                                    <h3> Learn How to Prototype Faster with Mockplus! in 2020 </h3>
                                    <img src="assets/images/avatars/avatar-2.jpg" alt="">
                                    <span class="video-post-user">Stella Johnson</span>
                                    <span class="video-post-views">938k views</span>
                                    <span class="video-post-date"> 3 weeks ago </span>
                                </div>
                            </a>
                        </div>

                        <div>
                            <a href="single-video.html" class="video-post">
                                <!-- Blog Post Thumbnail -->
                                <div class="video-post-thumbnail">
                                    <span class="video-post-count">2.3M</span>
                                    <span class="video-post-time">14:00</span>
                                    <span class="play-btn-trigger"></span>
                                    <!-- option menu -->
                                    <span class="btn-option">
                                        <i class="icon-feather-more-vertical"></i>
                                    </span>
                                    <div class="dropdown-option-nav"
                                        uk-dropdown="pos: bottom-right ;mode : hover;animation: uk-animation-slide-bottom-small">
                                        <ul>
                                            <li>
                                                <span> <i class="uil-history"></i> Watch Later</span>
                                            </li>
                                            <li>
                                                <span> <i class="uil-bookmark"></i> Add Bookmark</span>
                                            </li>
                                            <li>
                                                <span> <i class="uil-share-alt"></i> Share Your Friends</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <img src="assets/images/video-thumbal/img-4.png" alt="">
                                </div>
                                <!-- Blog Post Content -->
                                <div class="video-post-content">
                                    <h3>Adobe XD Design Tutorial Website Landing Page </h3>
                                    <img src="assets/images/avatars/avatar-5.jpg" alt="">
                                    <span class="video-post-user">Alex Dolgove</span>
                                    <span class="video-post-views">531k views</span>
                                    <span class="video-post-date"> 2 weeks ago </span>
                                </div>
                            </a>
                        </div>

                        <div>
                            <a href="single-video.html" class="video-post">
                                <!-- Blog Post Thumbnail -->
                                <div class="video-post-thumbnail">
                                    <span class="video-post-count">1.4M</span>
                                    <span class="video-post-time">23:00</span>
                                    <span class="play-btn-trigger"></span>
                                    <!-- option menu -->
                                    <span class="btn-option">
                                        <i class="icon-feather-more-vertical"></i>
                                    </span>
                                    <div class="dropdown-option-nav"
                                        uk-dropdown="pos: bottom-right ;mode : hover ;animation: uk-animation-slide-bottom-small">
                                        <ul>
                                            <li>
                                                <span> <i class="uil-history"></i> Watch Later</span>
                                            </li>
                                            <li>
                                                <span> <i class="uil-bookmark"></i> Add Bookmark</span>
                                            </li>
                                            <li>
                                                <span> <i class="uil-share-alt"></i> Share Your Friends</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <img src="assets/images/video-thumbal/img-5.png" alt="">
                                </div>
                                <!-- Blog Post Content -->
                                <div class="video-post-content">
                                    <h3> Learn UI/UX Designing Latest Website In Adobe XD </h3>
                                    <img src="assets/images/avatars/avatar-4.jpg" alt="">
                                    <span class="video-post-user">Adrian Mohani</span>
                                    <span class="video-post-views">531k views</span>
                                    <span class="video-post-date"> 2 weeks ago </span>
                                </div>
                            </a>
                        </div>

                    </div>

                    <ul class="uk-pagination my-5 uk-flex-center" uk-margin>
                        <li class="uk-active"><span>1</span></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li class="uk-disabled"><span>...</span></li>
                        <li><a href="#"><span uk-pagination-next></span></a></li>
                    </ul>

                </div>


                <!-- footer
               ================================================== -->
                <div class="footer">
                    <div class="uk-grid-collapse" uk-grid>
                        <div class="uk-width-expand@s uk-first-column">
                            <p>Copyright &copy; 2020.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
                        </div>
                        <div class="uk-width-auto@s">
                            <nav class="footer-nav-icon">
                                <ul>
                                    <li><a href="#"><i class="icon-brand-facebook"></i></a></li>
                                    <li><a href="#"><i class="icon-brand-dribbble"></i></a></li>
                                    <li><a href="#"><i class="icon-brand-youtube"></i></a></li>
                                    <li><a href="#"><i class="icon-brand-twitter"></i></a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>


            </div>
        </div>

    </div>


    <!-- For Night mode -->
    <script>
        (function (window, document, undefined) {
            'use strict';
            if (!('localStorage' in window)) return;
            var nightMode = localStorage.getItem('gmtNightMode');
            if (nightMode) {
                document.documentElement.className += ' night-mode';
            }
        })(window, document);


        (function (window, document, undefined) {

            'use strict';

            // Feature test
            if (!('localStorage' in window)) return;

            // Get our newly insert toggle
            var nightMode = document.querySelector('#night-mode');
            if (!nightMode) return;

            // When clicked, toggle night mode on or off
            nightMode.addEventListener('click', function (event) {
                event.preventDefault();
                document.documentElement.classList.toggle('night-mode');
                if (document.documentElement.classList.contains('night-mode')) {
                    localStorage.setItem('gmtNightMode', true);
                    return;
                }
                localStorage.removeItem('gmtNightMode');
            }, false);

        })(window, document);
    </script>


    <!-- javaScripts
                ================================================== -->
    <script src="assets/js/framework.js"></script>
    <script src="assets/js/jquery-3.3.1.min.js"></script>
    <script src="assets/js/simplebar.js"></script>
    <script src="assets/js/main.js"></script>

</body>

</html>